<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
* {padding:0px; margin:0px;}
ul,li {list-style:none; line-height:12px;}

.layout {width:100%; float:right; position:absolute; bottom:0px;}
.list {width:200px; float:right;}
.main {width:300px; font-size:12px; border:1px solid #ddd; background-color:#f3f3f3; float:right; padding:5px;}

.title {height:22px; line-height:22px; background:url(image/main.gif) 0px -22px; padding-left:20px;}
.title .name {font-size:12px; color:#fff; font-weight:bold; background-image:url(image/main.gif);}
.title .close {width:20px; height:22px; background:url(image/main.gif) -40px -22px; float:right; cursor:pointer;}
.title .open {width:20px; height:22px; background:url(image/main.gif) -20px -22px; float:right; cursor:pointer;}
.tools {height:36px; background:url(image/main.gif) 0px -44px;}
.tools .msg_num {padding-left:40px; height:36px; line-height:36px; font-size:12px; background:url(image/main.gif) -20px -80px; background-repeat:no-repeat; float:left;}
.tools .pic {width:20px; height:36px; background:url(image/main.gif) 0px -80px; background-repeat:no-repeat; float:right;}
.tools .close {width:20px; height:20px; background:url(image/main.gif) -40px -156px; float:right; margin-top:6px; margin-right:10px; cursor:pointer;}
.tools .open {width:20px; height:20px; background:url(image/main.gif) -40px -176px; float:right; margin-top:6px; margin-right:10px; cursor:pointer;}
.user dl {font-size:12px; border-left:1px solid #c9c9cb; border-right:1px solid #c9c9cb; background-color:#eeedf3; padding:5px;}
.user dl dd {line-height:22px; border-bottom:1px dotted #fff; cursor:pointer;}
.user dl dd:hover {background-color:#fff;}
.user dl dt {height:20px; line-height:20px; background:url(image/main.gif) 0px -156px; border:0px; background-repeat:no-repeat; padding-left:20px; cursor:pointer;}
.user dl dt .name {background:url(image/main.gif) 0px -136px;}
.user dl dt .pic {width:20px; height:20px; background:url(image/main.gif) -20px -156px; float:right;}
.user dl .icon {width:15px; height:20px; background:url(image/main.gif) 0px -116px; float:left;}
.user .none dd {display:none;}
.bottom {height:26px; line-height:26px; background:url(image/main.gif) 0px -176px; padding-left:20px;}
.bottom .info {text-align:center; font-size:12px; color:#888; background:url(image/main.gif); background-position:bottom;}
.bottom .info span {width:20px; height:26px; line-height:26px; background:url(image/main.gif) -20px -176px; float:right;}
.record {height:100px; background-color:#fff; overflow:auto;}
.release {margin-top:10px;}
.release .msg {width:100%; height:60px; border:1px solid #e3e3e3;}
.release_btn {width:40px; height:20px; font-size:12px; color:#fff; font-weight:bold; border:none; background:url(image/main.gif) -20px -116px; float:right; margin-top:5px;}
</style>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function closeOpen(o,id){
	var arr = id.split(",");
	if(o.className == 'close'){
		o.className = 'open';
		for(var i=0; i<arr.length; i++){
			document.getElementById(arr[i]).style.display = 'block';
		}
	}else{
		o.className = 'close';
		for(var i=0; i<arr.length; i++){
			document.getElementById(arr[i]).style.display = 'none';
		}
	}
}
function userList(){
	ajax.getHttp('api/xml.php?type=list',function(data){
		
	});
}
window.onload  = function(){
	
}
</script>
</head>

<body>
<div class="layout">
    <div class="list">
        <div class="title">
        	<div class="name">在线客服<span class="open" onClick="closeOpen(this,'user')"></span></div>
        </div>
        <div class="tools">
            <div class="msg_num"><a href="#">您有(1)条新消息</a></div>
        </div>
        <div class="user">        
            <dl id="userlist">
                <dt onClick="this.parentNode.className=(this.parentNode.className=='')?'none':''">
                    <div class="name">用户列表[10]<span class="pic"></span></div>                
                </dt>
                <dd><span class="icon"></span>用户名称1</dd>
            </dl>        
        </div>
        <div class="bottom"><div class="info">www.hometj.com<span></span></div></div>
    </div>
    <div class="main" id="main" style="display:none;">
    	<div class="title">用户名</div>
    	<div class="record">
        	asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
            asdfsafdsa<br />
        </div>
        <div class="release">
        	<form action="" method="post">
            	<textarea class="msg" name="" cols="" rows=""></textarea>
                <input name="" class="release_btn" type="button" value="发送">
            </form>
        </div>
    </div>
</div>
</body>
</html>